<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="130" class="search-form" style="width: 100%">
                            <Row>
                                <i-col span="8">
                                    <Form-item label="GPS型号" prop="gpsType" >
                                        <Select v-model="searchForm.gpsType" placeholder="请选择" clearable style="width: 180px">
                                            <Option v-for="item in gpsTypeList" :value="item.value" :key="item.value">{{ item.title }}
                                            </Option>
                                        </Select>
                                    </Form-item>
                                </i-col>
                                <i-col span="8">
                                    <Form-item label="GPS年卡类型" prop="gpsYearType" >
                                        <Select v-model="searchForm.gpsYearType" placeholder="请选择" clearable style="width: 180px">
                                            <Option v-for="item in gpsYearList" :value="item.value" :key="item.value">{{ item.title }}
                                            </Option>
                                        </Select>
                                    </Form-item>
                                </i-col>
                                <i-col span="8">
                                    <Form-item label="GPS厂商" prop="gpsFirm" >
                                        <Select v-model="searchForm.gpsFirm" placeholder="请选择" clearable style="width: 180px">
                                            <Option v-for="item in gpsFirmList" :value="item.value" :key="item.value">{{ item.title }}
                                            </Option>
                                        </Select>
                                    </Form-item>
                                </i-col>
                            </Row>
                            <Row style="text-align: center;margin-left: 0">
                                <Form-item :label-width="0">
                                    <Button @click="handleSearch" type="primary" style=" border: none;" icon="ios-search">查询</Button>
                                    <Button @click="handleReset"  icon="md-redo">重置</Button>
                                </Form-item>
                            </Row>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="add" type="primary" icon="md-add"  style=" border: none">新增GPS产品</Button>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" ref="table">
                            <template slot-scope="{ row, index }" slot="gpsFirm">
                                <div v-if="row.gpsFirm === 'P-ZR'">
                                    <span size="default">中瑞</span>
                                </div>
                                <div v-if="row.gpsFirm === 'P-TY'">
                                    <span size="default">天易</span>
                                </div>
                                <div v-if="row.gpsFirm === 'P-OLE'">
                                    <span size="default">欧拉</span>
                                </div>
                            </template>
                            <template slot-scope="{ row, index }" slot="gpsType">
                                <div v-if="row.gpsType === 'wireless'">
                                    <span size="default">无线</span>
                                </div>
                                <div v-if="row.gpsType === 'wired'">
                                    <span size="default">有线</span>
                                </div>
                                <div v-if="row.gpsType === 'wiredAndWireless'">
                                    <span size="default">有线+无线</span>
                                </div>
                            </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                            </Button>
                            <Button type="error" size="small" @click="remove(row)">删除</Button>
                        </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="userModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '90px'}">
            <Form ref="userForm" :model="userForm" :label-width="100" :rules="userFormValidate">
                <FormItem label="GPS产品ID" prop="gpsProductId">
                    <Input v-model="userForm.gpsProductId" autocomplete="off"/>
                </FormItem>
                <FormItem label="GPS全称" prop="gpsFullName">
                    <Input v-model="userForm.gpsFullName" autocomplete="off"/>
                </FormItem>
                <FormItem label="GPS简称" prop="gpsAbbName">
                    <Input v-model="userForm.gpsAbbName" autocomplete="off"/>
                </FormItem>
                <Form-item label="GPS厂商" prop="gpsFirm" >
                    <Select v-model="userForm.gpsFirm" placeholder="请选择" clearable style="width: 180px">
                        <Option v-for="item in gpsFirmList" :value="item.value" :key="item.value">{{ item.title }}
                        </Option>
                    </Select>
                </Form-item>
                <Form-item label="GPS型号" prop="gpsType" >
                    <Select v-model="userForm.gpsType" placeholder="请选择" clearable style="width: 180px">
                        <Option v-for="item in gpsTypeList" :value="item.value" :key="item.value">{{ item.title }}
                        </Option>
                    </Select>
                </Form-item>
                <Form-item label="GPS年卡类型" prop="gpsYearType" >
                    <Select v-model="userForm.gpsYearType" placeholder="请选择" clearable style="width: 180px">
                        <Option v-for="item in gpsYearList" :value="item.value" :key="item.value">{{ item.title }}
                        </Option>
                    </Select>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelUser">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        getList,
        addOrUpdate,
        removeGpsProduct
    } from "@/projects/afs-apply/api/gpsproduct/gpsProduct";
    import { getDictDataByType } from "@/projects/basic/api/admin/datadic";

    export default {
        name: "gpsProduct",
        data() {
            return {
                loading: true,
                operationLoading: false,
                userModalVisible: false,
                gpsTypeList:[],
                gpsYearList:[],
                gpsFirmList:[],
                modalTitle:'',
                modalType: 0,
                searchForm: {
                    gpsType: '',
                    gpsFirm: '',
                    gpsYearType:0,
                    pageNumber: 1,
                    pageSize: 10,
                    downTerm: null,
                    upTerm: null
                },
                userForm: {
                    gpsAbbName:'',
                    gpsFullName:'',
                    gpsProductId:'',
                    gpsType: '',
                    gpsFirm: '',
                    gpsYearType:0,
                    downTerm: 0,
                    upTerm: 0
                },
                submitLoading: false,
                columns: [
                    {
                        type: "selection",
                        minWidth: 60,
                        maxWidth:60,
                        align: "center",
                        fixed: "left"
                    },{
                        title:'序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                        fixed: "left"
                    },
                    {
                        title: "GPS全称",
                        key: "gpsFullName",
                        align: "center",
                        minWidth: 200,
                        fixed: "left"
                    },
                    {
                        title: "GPS厂商",
                        key: "gpsFirm",
                        align: "center",
                        minWidth: 80,
                        slot: "gpsFirm"
                    },
                    {
                        title: "GPS型号",
                        key: "gpsType",
                        sortable: true,
                        align: "center",
                        minWidth: 80,
                        slot: "gpsType"
                    },
                    {
                        title: "GPS产品ID",
                        key: "gpsProductId",
                        align: "center",
                        minWidth: 160
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 100,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                total: 0,
                userFormValidate: {
                    // username: [
                    //     {required: true, message: "账号不能为空", trigger: "blur"}
                    // ],
                    // userRealName: [
                    //     {required: true, message: "用户名不能为空", trigger: "blur"}
                    // ],
                    // phone: [
                    //     {required: true, message: "手机号不能为空", trigger: "blur"},
                    //     {validator: validateMobile, trigger: "blur"}
                    // ],
                    // userEmail: [
                    //     {required: true, message: "请输入邮箱地址"},
                    //     {type: "email", message: "邮箱格式不正确"}
                    // ]
                },
            };
        },
        methods: {

            getUserList() {
                // 多条件搜索用户列表
                this.loading = true;
                if(this.searchForm.gpsYearType==="1"){
                    this.searchForm.downTerm=0;
                    this.searchForm.upTerm=12;
                }else if(this.searchForm.gpsYearType==="2"){
                    this.searchForm.downTerm=12;
                    this.searchForm.upTerm=24;
                }else if(this.searchForm.gpsYearType==="3"){
                    this.searchForm.downTerm=24;
                    this.searchForm.upTerm=100;
                }
                getList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            //查询按钮操作
            handleSearch() {
                this.loading=true;
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getUserList();
            },
            handleReset(){
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.gpsFirm = "";
                this.searchForm.gpsType = "";
                this.searchForm.gpsYearType = "";
                this.searchForm.downTerm=null;
                this.searchForm.upTerm=null;
                // 重新加载数据
                this.getUserList();
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getUserList();
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getUserList();
            },
            add(){
                this.modalType = 0;
                this.modalTitle = "添加GPS产品";
                this.$refs.userForm.resetFields();
                this.userModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑GPS产品";
                this.$refs.userForm.resetFields();
                let str = JSON.stringify(v);
                let gpsInfo = JSON.parse(str);
                if(gpsInfo.downTerm===0){
                    gpsInfo.gpsYearType="1";
                }else if(gpsInfo.downTerm===12){
                    gpsInfo.gpsYearType="2"
                }else if(gpsInfo.downTerm===24){
                    gpsInfo.gpsYearType="3"
                }
                this.userForm = gpsInfo;
                this.userModalVisible = true;
            },
            submitUser() {
                this.$refs.userForm.validate(valid => {
                    if (valid) {
                        if(this.userForm.gpsYearType==="1"){
                            this.userForm.downTerm=0;
                            this.userForm.upTerm=12;
                        }else if(this.userForm.gpsYearType==="2"){
                            this.userForm.downTerm=12;
                            this.userForm.upTerm=24;
                        }else if(this.userForm.gpsYearType==="3"){
                            this.userForm.downTerm=24;
                            this.userForm.upTerm=100;
                        }
                        if (this.modalType === 0) {
                            delete this.userForm.id;
                            this.submitLoading = true;
                            addOrUpdate(this.userForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getUserList();
                                    this.userModalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                            });
                        } else {
                            // 编辑
                            this.submitLoading = true;
                            addOrUpdate(this.userForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getUserList();
                                    this.userModalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                            });
                        }
                    }
                });
            },
            cancelUser() {
                this.userModalVisible = false;
            },
            getGpsType() {
                let param = {
                    type: "gpsType"
                };
                getDictDataByType(param.type).then(res => {
                    if (res.code === "0000") {
                        for(let i=0;i<res.data.length;i++){
                            if(res.data[i].value!="noInstall"){
                                this.gpsTypeList.push(res.data[i]);
                            }
                        }
                        // this.gpsTypeList = res.data;
                    }
                });
            },
            getGpsFirm() {
                let param = {
                    type: "gpsSupplier"
                };
                getDictDataByType(param.type).then(res => {
                    if (res.code === "0000") {
                        this.gpsFirmList = res.data;
                    }
                });
            },
            getGpsYearType() {
                let param = {
                    type: "gpsYearType"
                };
                getDictDataByType(param.type).then(res => {
                    if (res.code === "0000") {
                        this.gpsYearList = res.data;
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除 " + v.gpsFullName + " ?",
                    onOk: () => {
                        this.operationLoading = true;
                        removeGpsProduct(v).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.getUserList();
                            }
                        });
                    }
                });
            },
        },
        mounted() {
            this.getGpsFirm();
            this.getGpsType();
            this.getGpsYearType();
            this.getUserList();
        },
    }
</script>

<style scoped>

</style>
